<template>
    <section class="information-container">
        <section :class="['info-item']" v-for="item in list" :key="item.name">
            <section :class="['item-title']">
                {{ item.name }}
            </section>
            <!-- 数组传值 -->
            <template v-if="item.status !== null && item.type === 'array'">
                <section class="item-value" :style="{ 'min-width': '52%' }">
                    <template v-if="item.status === -1">
                        <span class="analyse">{{ item.value }}</span>
                    </template>
                    <template v-else>
                        <section class="level">
                            <section
                                :class="['level-li ', item.status === index ? 'active_' + item.status : '']"
                                v-for="(i, index) in level"
                                :key="i"
                            >
                                <span>{{ i }}</span>
                                <i></i>
                            </section>
                        </section>
                        <p v-if="item.status !== 0">{{ item.value }}</p>
                    </template>
                </section>
            </template>
            <!-- 对象传值 -->
            <template v-else-if="item.status !== null && item.type === 'object'">
                <section :class="['item-value', item.status !== 0 ? 'abnormal' : '', 'abnormal_' + item.icon]">
                    <span v-show="false">{{ item.label }}</span>
                    <span>{{ item.value ? item.value : '-' }}</span>
                    <span v-if="item.icon !== null">
                        <span v-if="item.icon === 0" class="iconfont icon-jiantou_xiangshang_o"></span>
                        <span v-else-if="item.icon === 1" class="iconfont icon-jiantou_xiangxia_o"></span>
                    </span>
                </section>
            </template>
            <template v-else>
                <section class="item-value">
                    <span>{{ item.value ? item.value : '-' }}</span>
                </section>
            </template>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
//接收父级传递的参数
const props = defineProps(['data', 'keys'])
const level = reactive(['优秀', '良好', '一般', '较差'])
interface ItemInterface {
    name: string
    value: string
    status: number | null | undefined
    className?: string
    type?: string
    label?: string
    icon?: null | number //0向下 1向上
}

const list: ItemInterface[] = reactive([])
let value = ''
let status: number | null | undefined = null
let type = ''
let label = ''
let icon: null | number = null
//监听参数的首次变化
watchEffect(() => {
    list.length = 0
    for (const key in props.data) {
        // console.log(props.keys[key], key, '=', props.data[key], Object.prototype.toString.call(props.data[key]))
        if (Object.prototype.toString.call(props.data[key]) === '[object Array]') {
            value = props.data[key][0]
            status = Number(props.data[key][1])
            type = 'array'
        } else if (Object.prototype.toString.call(props.data[key]) === '[object Object]') {
            value = props.data[key].value
            status = Number(props.data[key].status)
            label = props.data[key].label
            type = 'object'
            icon = props.data[key].icon
            console.log(key, props.data[key])
        } else {
            value = props.data[key]
            status = null
            type = 'string'
        }
        list.push({
            name: props.keys[key],
            value,
            status,
            type,
            label,
            icon
        })
    }
})
</script>

<style scoped lang="scss">
.level {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: var(--cxl-size-12);
    .level-li {
        width: 22%;
        span {
            width: 100%;
            line-height: var(--cxl-size-24);
            font-size: var(--cxl-size-12);
            text-align: center;
            color: var(--cxl-color-666666);
            display: block;
            margin: auto;
            border-radius: var(--cxl-size-20);
            position: relative;
            &::after {
                content: '';
                width: 0;
                height: 0;
                border-top: var(--cxl-size-6) solid var(--cxl-color-F59A23);
                border-right: var(--cxl-size-6) solid transparent;
                border-left: var(--cxl-size-6) solid transparent;
                display: none;
                position: absolute;
                left: 50%;
                bottom: calc(0% - var(--cxl-size-6));
                transform: translate(-50%, 0);
            }
        }
        i {
            margin-top: var(--cxl-size-10);
            width: 100%;
            height: var(--cxl-size-8);
            background-color: var(--cxl-color-EFEFEF);
            display: block;
        }
        &:nth-child(1) {
            i {
                border-radius: var(--cxl-size-6) 0 0 var(--cxl-size-6);
            }
        }
        &:last-child {
            i {
                border-radius: 0 var(--cxl-size-6) var(--cxl-size-6) 0;
            }
        }
        &.active_0 {
            span {
                background-color: var(--cxl-color-primary);
                color: var(--cxl-color-white);
                &::after {
                    border-top-color: var(--cxl-color-primary);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-primary);
            }
        }
        &.active_1 {
            span {
                background-color: var(--cxl-color-368AF7);
                color: var(--cxl-color-white);
                &::after {
                    border-top-color: var(--cxl-color-368AF7);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-368AF7);
            }
        }
        &.active_2 {
            span {
                background-color: var(--cxl-color-F59A23);
                color: var(--cxl-color-white);
                &::after {
                    border-top-color: var(--cxl-color-F59A23);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-F59A23);
            }
        }
        &.active_3 {
            span {
                background-color: var(--cxl-color-ff5448);
                color: var(--cxl-color-white);
                &::after {
                    border-top-color: var(--cxl-color-ff5448);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-ff5448);
            }
        }
    }
}

.information-container {
    box-sizing: border-box;
}
.info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cxl-size-15);

    &:not(:last-child) {
        margin-bottom: var(--cxl-size-10);
    }

    &.abnormal {
        .item-title {
            color: var(--cxl-color-ff5448);
        }
        .item-value {
            span {
                color: var(--cxl-color-ff5448);
            }
        }
    }
}
.item-value {
    font-size: var(--cxl-size-15);

    p {
        font-size: var(--cxl-size-15);
        color: var(--cxl-color-999999);
        margin-top: var(--cxl-size-6);
    }
    span {
        &:nth-child(2) {
            margin-left: var(--cxl-size-6);
        }
    }

    &.abnormal_0 {
        // color: var(--cxl-color-368AF7);
        .iconfont {
            color: var(--cxl-color-368AF7);
        }
    }
    &.abnormal_1 {
        // color: var(--cxl-color-ff5448);
        .iconfont {
            color: var(--cxl-color-ff5448);
        }
    }
    .analyse {
        color: var(--cxl-color-999999);
        font-size: var(--cxl-size-12);
        text-align: right;
        display: block;
    }
    .theme_-1 {
        color: var(--cxl-color-666666);
    }
    .theme_0 {
        color: var(--cxl-color-primary);
    }
    .theme_1 {
        color: var(--cxl-color-368AF7);
    }
    .theme_2 {
        color: var(--cxl-color-030303);
    }
    .theme_3 {
        color: var(--cxl-color-F9A809);
    }
}
</style>
